import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Button, Input, Tooltip, Icon } from 'antd';
import _ from 'lodash';
import { getscanRateList } from '@api/task';
import ScanRateManageTable from './components/scan-speed-table';
import ScanRateManageModal from './components/scan-speed-modal';
import './index.less';

const prefixCls = 'port-manage';
const Search = Input.Search;

const PortManage = () => {
  const [loading, setLoading] = useState(false);
  const [filter, setFilter] = useState({
    page: 1,
    pageSize: 10,
    search: ''
  });
  const [total, setTotal] = useState(0);
  const [tableList, setTableList] = useState([]);
  const [portManageModalVisible, setPortManageModalVisible] = useState(false);
  //获取端口列表
  const ScanRateList = () => {
    if (filter.search) {
      filter.search = filter.search.replace(/\\/g, '\\\\');
      filter.search = filter.search.replace(/\|/g, '\\|');
    } else {
      delete filter.search;
    }
    setLoading(true);
    getscanRateList(filter)
      .then(res => {
        const data = res.data.data;
        setLoading(false);
        setTableList(_.get(data, 'list', []));
        setTotal(_.get(data, 'count', 0));
      })
      .catch(() => setLoading(false));
  };

  const onTableChange = pagination => {
    let { page, pageSize } = filter;
    page = pagination.current;
    pageSize = pagination.pageSize;
    setFilter({ ...filter, page, pageSize });
  };

  const changeModModalVisible = visible => {
    setPortManageModalVisible(visible);
  };

  useEffect(() => {
    ScanRateList();
  }, []);

  useEffect(() => {
    ScanRateList();
  }, [filter]);

  const pagination = {
    total: total,
    current: filter.page,
    pageSize: filter.pageSize,
    showQuickJumper: true,
    pageSizeOptions: ['10', '20', '50', '100'],
    showSizeChanger: true,
    size: 'small',
    showTotal: num => `共 ${num} 条`
  };

  return (
    <div className={`${prefixCls}`}>
      <div className={`${prefixCls}-title`}>
        扫描速率管理
        <Tooltip
          className="info"
          placement="right"
          overlayClassName={`${prefixCls}-page-title-desc`}
          title="添加扫描速率策略后，可在新建任务时选择对应的扫描速率模版"
        >
          <Icon type="exclamation-circle" />
        </Tooltip>
      </div>
      <div className={`${prefixCls}-header`}>
        <div className={`${prefixCls}-header-left`}>
          <Button type="primary" onClick={() => changeModModalVisible(true)}>
            添加扫描速率模版
          </Button>
        </div>
        <div className={`${prefixCls}-header-right`}>
          <Search
            enterButton
            placeholder="请输入名称"
            onSearch={value => {
              let search = value.toString();
              setFilter({ ...filter, search: search, page: 1 });
            }}
          />
        </div>
      </div>
      <div className={`${prefixCls}-header-count`}>共有“{total}”个扫描速率模版</div>
      <div className={`${prefixCls}-body`}>
        <ScanRateManageTable
          loading={loading}
          data={tableList}
          onTableChange={onTableChange}
          changeModalVisible={changeModModalVisible}
          total={total}
          pagination={pagination}
          getScanRateList={ScanRateList}
        />
      </div>
      <ScanRateManageModal
        modalVisible={portManageModalVisible}
        changeModalVisible={changeModModalVisible}
        getScanRateList={ScanRateList}
        isAddPort={true}
      />
    </div>
  );
};

PortManage.propTypes = {
  history: PropTypes.object
};

export default PortManage;
